<template>
  <div class="box">
    <h4>商品展示页</h4>

    <hr />

    <!-- 如果需要保存组件的状态, 需要使用 keep-alive 组件 -->
    <!--
      在进行切换的时候，组件的所有内容都会被保存下来
      虚拟dom中会临时生成所有的东西，表单的内容也会保存
      问题： 如果直接这样写了，会导致性能问题

      使用 includes 包含对应的路由名称
     -->
    <!-- <div>
      <template v-if="$route.meta.keepAlive">
        <keep-alive>
          <router-view></router-view>
        </keep-alive>
      </template>

      <template v-else>
        <router-view></router-view>
      </template>
    </div> -->
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

<script>
export default {}
</script>

<style lang="less" scoped>
.box {
  padding: 30px;
  background-color: skyblue;
}
</style>
